<link rel="stylesheet" href="../css/userInfoBar.css">
<link rel="stylesheet" href="../bootstrap3/css/bootstrap.css">
<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css">

<script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>

<div class="btn-group">
    <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
        <img id="userInfoBarImg1" alt="" class="img-circle" src="photo.jpg" width="38px" height="38px"/>
        <span style="color: #FFFFFF;font-size: 15px">
    <i>username</i>
</span>
    </button>
    <div class="dropdown-menu pull-right"
         style="background: #FFFFFF;width: 320px;overflow: hidden" role="menu">
        <div style="margin-top: 16px;border-bottom: 1px solid #eeeeee">
            <div style="text-align: center">
                <img id="userInfoBarImg2" class="img-circle" src="photo.jpg"
                     style="width: 38px;height: 38px;"/>
            </div>
            <div style="color: #323534;text-align: center;line-height: 36px;font-size: 15px">
                <span>username</span>
            </div>
        </div>

        <div class="row" style="margin-left: 15px;margin-right: 15px;margin-top: 10px">
            <div class="col-md-4 text-center grid">
                <i class="fa fa-user" style="font-size: 25px;line-height: 45px;"></i>
                <p style="padding: 0px;margin-top: 6px;margin-bottom: 10px;font-size: 12px">
                    个人中心</p>
            </div>
            <div class="col-md-4 text-center grid">
                <i class="fa fa-gear" style="font-size: 25px;line-height: 45px;"></i>
                <p style="padding: 0px;margin-top: 6px;margin-bottom: 10px;font-size: 12px">
                    账号管理</p>
            </div>
            <div class="col-md-4 text-center grid">
                <i class="fa fa-key" style="font-size: 25px;line-height: 45px;"></i>
                <p style="padding: 0px;margin-top: 6px;margin-bottom: 10px;font-size: 12px">
                    密码修改</p>
            </div>
        </div>

        <div class="row" style="margin-left: 15px;margin-right: 15px;margin-top: 10px">
            <div class="col-md-4 text-center grid">
                <i class="fa fa-user-circle" style="font-size: 25px;line-height: 45px;"></i>
                <p style="padding: 0px;margin-top: 6px;margin-bottom: 10px;font-size: 12px">
                    修改头像</p>
            </div>
            <div class="col-md-4 text-center grid">
                <i class="fa fa-comments" style="font-size: 25px;line-height: 45px;"></i>
                <p style="padding: 0px;margin-top: 6px;margin-bottom: 10px;font-size: 12px">
                    消息</p>
            </div>
            <div class="col-md-4 text-center grid">
                <i class="fa fa-heart-o" style="font-size: 25px;line-height: 45px;"></i>
                <p style="padding: 0px;margin-top: 6px;margin-bottom: 10px;font-size: 12px">
                    帮助中心</p>
            </div>
        </div>


        <div class="row" style="margin-top: 20px">
            <div class="text-center"
                 style="padding: 15px;margin: 0px;background: #f6f5f5;color: #323534;">
                <i class="fa fa-sign-out"></i> 退出登入界面
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">
    var avatar=$.cookie("avatar");
    $("#userInfoBarImg1").attr("src",avatar);
    $("#userInfoBarImg2").attr("src",avatar);
</script>